<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工序管理系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .main-container {
      padding: 20px;
      background-color: #f5f7fa;
      min-height: 100vh;
    }
    .breadcrumb {
      margin-bottom: 15px;
    }
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    .page-title {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
    }
    .header-actions {
      display: flex;
      align-items: center;
    }
    .process-table {
      margin-top: 20px;
    }
    .pagination-container {
      margin-top: 15px;
      text-align: right;
    }
    .mb-15 {
      margin-bottom: 15px;
    }
    .mr-10 {
      margin-right: 10px;
    }
    .ml-15 {
      margin-left: 15px;
    }
    .mt-5 {
      margin-top: 5px;
    }
    .flex-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .flex-center {
      display: flex;
      align-items: center;
    }
    .template-card {
      margin-bottom: 15px;
      cursor: pointer;
      transition: all 0.3s;
    }
    .template-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }
    .template-card.active {
      border: 2px solid #409EFF;
    }
    .process-steps {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      position: relative;
    }
    .process-step {
      text-align: center;
      position: relative;
      z-index: 2;
      flex: 1;
    }
    .step-icon {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      background: #409EFF;
      color: #fff;
      margin: 0 auto 10px;
      font-size: 18px;
    }
    .step-connector {
      position: absolute;
      top: 25px;
      left: 0;
      right: 0;
      height: 2px;
      background: #dcdfe6;
      z-index: 1;
    }
    .param-table {
      margin-top: 15px;
    }
    .template-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="main-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工序管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <h2 class="page-title">工序管理</h2>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-plus" @click="showCreateDialog">
          新建生产线
        </el-button>
        <el-button type="success" icon="el-icon-edit" @click="showTemplateDialog">
          管理模板
        </el-button>
      </div>
    </div>

    <!-- 生产线列表 -->
    <el-card shadow="hover">
      <div slot="header" class="flex-between">
        <h3>生产线列表</h3>
        <div class="table-actions flex-center">
          <el-input
              v-model="searchQuery"
              placeholder="搜索生产线"
              prefix-icon="el-icon-search"
              style="width: 200px; margin-right: 10px"
              @keyup.enter.native="handleSearch"
          ></el-input>
          <el-select v-model="typeFilter" placeholder="类型筛选" @change="handleFilter" class="mr-10">
            <el-option label="全部类型" value=""></el-option>
            <el-option label="老叶烘青" value="老叶烘青"></el-option>
            <el-option label="老叶炒青" value="老叶炒青"></el-option>
            <el-option label="嫩叶烘青" value="嫩叶烘青"></el-option>
            <el-option label="嫩叶炒青" value="嫩叶炒青"></el-option>
          </el-select>
          <el-select v-model="statusFilter" placeholder="状态筛选" @change="handleFilter" class="mr-10">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="运行中" value="运行中"></el-option>
            <el-option label="已停止" value="已停止"></el-option>
            <el-option label="维护中" value="维护中"></el-option>
          </el-select>
        </div>
      </div>

      <el-table
          :data="filteredLines"
          stripe
          style="width: 100%"
          v-loading="tableLoading"
      >
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="生产线名称" width="150"></el-table-column>
        <el-table-column prop="type" label="生产线类型" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag> 
          </template>
        </el-table-column>
        <el-table-column prop="template" label="使用模板" width="150"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewLine(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="editLine(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteLine(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            :total="filteredLines.length"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新建生产线对话框 -->
    <el-dialog
        :title="isEditLine ? '编辑生产线' : '新建生产线'"
        :visible.sync="lineDialogVisible"
        width="800px"
        :close-on-click-modal="false"
    >
      <el-form :model="lineForm" :rules="lineRules" ref="lineForm" label-width="120px">
        <el-form-item label="生产线名称" prop="name">
          <el-input v-model="lineForm.name" placeholder="请输入生产线名称"></el-input>
        </el-form-item>
        <el-form-item label="生产线类型" prop="type">
          <el-select v-model="lineForm.type" placeholder="请选择生产线类型" @change="handleTypeChange">
            <el-option label="老叶烘青" value="老叶烘青"></el-option>
            <el-option label="老叶炒青" value="老叶炒青"></el-option>
            <el-option label="嫩叶烘青" value="嫩叶烘青"></el-option>
            <el-option label="嫩叶炒青" value="嫩叶炒青"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择模板" prop="template">
          <el-select v-model="lineForm.template" placeholder="请选择模板">
            <el-option
                v-for="template in filteredTemplates"
                :key="template.id"
                :label="template.name"
                :value="template.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="lineForm.status" placeholder="请选择状态">
            <el-option label="运行中" value="运行中"></el-option>
            <el-option label="已停止" value="已停止"></el-option>
            <el-option label="维护中" value="维护中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="lineForm.description" placeholder="请输入生产线描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="lineDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitLineForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 模板管理对话框 -->
    <el-dialog
        title="模板管理"
        :visible.sync="templateDialogVisible"
        width="1000px"
        :close-on-click-modal="false"
    >
      <div class="template-header">
        <h3>生产线模板</h3>
        <el-button type="primary" icon="el-icon-plus" @click="showCreateTemplateDialog">
          新建模板
        </el-button>
      </div>

      <el-tabs v-model="activeTemplateTab" type="card">
        <el-tab-pane label="烘青模板" name="baking">
          <el-row :gutter="15">
            <el-col :span="12" v-for="template in bakingTemplates" :key="template.id">
              <el-card
                  :class="['template-card', selectedTemplateId === template.id ? 'active' : '']"
                  shadow="hover"
                  @click.native="selectTemplate(template)"
              >
                <div slot="header">
                  <h4>{{ template.name }}</h4>
                  <p>{{ template.description }}</p>
                </div>
                <div class="process-steps">
                  <div class="step-connector"></div>
                  <div class="process-step" v-for="(step, index) in template.steps" :key="index">
                    <div class="step-icon">{{ index + 1 }}</div>
                    <div>{{ step.name }}</div>
                  </div>
                </div>
                <el-button type="primary" size="mini" @click="editTemplate(template)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteTemplate(template)">删除</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="炒青模板" name="stirFry">
          <el-row :gutter="15">
            <el-col :span="12" v-for="template in stirFryTemplates" :key="template.id">
              <el-card
                  :class="['template-card', selectedTemplateId === template.id ? 'active' : '']"
                  shadow="hover"
                  @click.native="selectTemplate(template)"
              >
                <div slot="header">
                  <h4>{{ template.name }}</h4>
                  <p>{{ template.description }}</p>
                </div>
                <div class="process-steps">
                  <div class="step-connector"></div>
                  <div class="process-step" v-for="(step, index) in template.steps" :key="index">
                    <div class="step-icon">{{ index + 1 }}</div>
                    <div>{{ step.name }}</div>
                  </div>
                </div>
                <el-button type="primary" size="mini" @click="editTemplate(template)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteTemplate(template)">删除</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer">
        <el-button @click="templateDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 模板编辑对话框 -->
    <el-dialog
        :title="isEditTemplate ? '编辑模板' : '新建模板'"
        :visible.sync="templateEditDialogVisible"
        width="900px"
        :close-on-click-modal="false"
    >
      <el-form :model="templateForm" :rules="templateRules" ref="templateForm" label-width="120px">
        <el-form-item label="模板名称" prop="name">
          <el-input v-model="templateForm.name" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板类型" prop="type">
          <el-select v-model="templateForm.type" placeholder="请选择模板类型" @change="handleTemplateTypeChange">
            <el-option label="烘青" value="烘青"></el-option>
            <el-option label="炒青" value="炒青"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="templateForm.description" placeholder="请输入模板描述"></el-input>
        </el-form-item>

        <el-form-item label="工序参数">
          <el-table :data="templateForm.steps" class="param-table" border stripe>
            <el-table-column prop="name" label="工序名称" width="120"></el-table-column>
            <el-table-column prop="temperature" label="温度(℃)" width="100">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.temperature" :min="0" :max="300" size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="时间(分钟)" width="100">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.time" :min="0" :max="600" size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="humidity" label="湿度(%)" width="100">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.humidity" :min="0" :max="100" size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="pressure" label="压力(Pa)" width="120">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.pressure" :min="0" :max="10000" size="mini"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="speed" label="转速(rpm)" width="120">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.speed" :min="0" :max="1000" size="mini"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="templateEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTemplateForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        searchQuery: '',
        typeFilter: '',
        statusFilter: '',
        tableLoading: false,
        pageSize: 10,
        currentPage: 1,

        // 生产线相关数据
        productionLines: [
          { id: 1, name: '一号生产线', type: '老叶烘青', status: '运行中', template: '标准老叶烘青模板', description: '主要用于老叶烘青加工' },
          { id: 2, name: '二号生产线', type: '嫩叶炒青', status: '运行中', template: '标准嫩叶炒青模板', description: '主要用于嫩叶炒青加工' },
          { id: 3, name: '三号生产线', type: '老叶炒青', status: '维护中', template: '定制老叶炒青模板', description: '定制化老叶炒青生产线' },
          { id: 4, name: '四号生产线', type: '嫩叶烘青', status: '已停止', template: '高效嫩叶烘青模板', description: '高效嫩叶烘青专用' }
        ],
        lineDialogVisible: false,
        isEditLine: false,
        lineForm: {
          id: null,
          name: '',
          type: '',
          status: '运行中',
          template: '',
          description: ''
        },
        lineRules: {
          name: [{ required: true, message: '请输入生产线名称', trigger: 'blur' }],
          type: [{ required: true, message: '请选择生产线类型', trigger: 'change' }],
          status: [{ required: true, message: '请选择状态', trigger: 'change' }],
          template: [{ required: true, message: '请选择模板', trigger: 'change' }]
        },

        // 模板相关数据
        templateDialogVisible: false,
        templateEditDialogVisible: false,
        isEditTemplate: false,
        activeTemplateTab: 'baking',
        selectedTemplateId: null,
        templateForm: {
          id: null,
          name: '',
          type: '烘青',
          description: '',
          steps: []
        },
        templateRules: {
          name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
          type: [{ required: true, message: '请选择模板类型', trigger: 'change' }]
        },

        // 模板数据
        templates: [
          {
            id: 'temp1',
            name: '标准老叶烘青模板',
            type: '烘青',
            description: '标准老叶烘青工艺流程',
            steps: [
              { name: '摊青', temperature: 25, time: 30, humidity: 70, pressure: 0, speed: 0 },
              { name: '杀青', temperature: 220, time: 8, humidity: 40, pressure: 0, speed: 0 },
              { name: '揉捻', temperature: 60, time: 25, humidity: 65, pressure: 2000, speed: 45 },
              { name: '烘青', temperature: 90, time: 40, humidity: 30, pressure: 0, speed: 0 },
              { name: '干燥', temperature: 80, time: 50, humidity: 15, pressure: 0, speed: 0 }
            ]
          },
          {
            id: 'temp2',
            name: '高效嫩叶烘青模板',
            type: '烘青',
            description: '高效嫩叶烘青工艺流程',
            steps: [
              { name: '摊青', temperature: 22, time: 25, humidity: 75, pressure: 0, speed: 0 },
              { name: '杀青', temperature: 200, time: 6, humidity: 45, pressure: 0, speed: 0 },
              { name: '揉捻', temperature: 55, time: 20, humidity: 70, pressure: 1800, speed: 40 },
              { name: '烘青', temperature: 85, time: 35, humidity: 35, pressure: 0, speed: 0 },
              { name: '干燥', temperature: 75, time: 45, humidity: 20, pressure: 0, speed: 0 }
            ]
          },
          {
            id: 'temp3',
            name: '标准老叶炒青模板',
            type: '炒青',
            description: '标准老叶炒青工艺流程',
            steps: [
              { name: '摊青', temperature: 26, time: 35, humidity: 65, pressure: 0, speed: 0 },
              { name: '杀青', temperature: 240, time: 10, humidity: 35, pressure: 0, speed: 0 },
              { name: '揉捻', temperature: 65, time: 30, humidity: 60, pressure: 2200, speed: 50 },
              { name: '炒青', temperature: 180, time: 25, humidity: 25, pressure: 0, speed: 0 },
              { name: '干燥', temperature: 85, time: 55, humidity: 10, pressure: 0, speed: 0 }
            ]
          },
          {
            id: 'temp4',
            name: '定制嫩叶炒青模板',
            type: '炒青',
            description: '定制嫩叶炒青工艺流程',
            steps: [
              { name: '摊青', temperature: 23, time: 28, humidity: 72, pressure: 0, speed: 0 },
              { name: '杀青', temperature: 210, time: 7, humidity: 42, pressure: 0, speed: 0 },
              { name: '揉捻', temperature: 58, time: 22, humidity: 68, pressure: 1900, speed: 42 },
              { name: '炒青', temperature: 170, time: 20, humidity: 30, pressure: 0, speed: 0 },
              { name: '干燥', temperature: 78, time: 48, humidity: 18, pressure: 0, speed: 0 }
            ]
          }
        ]
      }
    },
    computed: {
      filteredLines() {
        let result = this.productionLines;
        if (this.searchQuery) {
          result = result.filter(line =>
              line.name.includes(this.searchQuery) ||
              line.description.includes(this.searchQuery)
          );
        }
        if (this.typeFilter) {
          result = result.filter(line => line.type === this.typeFilter);
        }
        if (this.statusFilter) {
          result = result.filter(line => line.status === this.statusFilter);
        }
        return result;
      },
      filteredTemplates() {
        if (!this.lineForm.type) return this.templates;

        if (this.lineForm.type.includes('烘青')) {
          return this.templates.filter(t => t.type === '烘青');
        } else if (this.lineForm.type.includes('炒青')) {
          return this.templates.filter(t => t.type === '炒青');
        }
        return this.templates;
      },
      bakingTemplates() {
        return this.templates.filter(t => t.type === '烘青');
      },
      stirFryTemplates() {
        return this.templates.filter(t => t.type === '炒青');
      }
    },
    methods: {
      statusTagType(status) {
        const map = {
          '运行中': 'success',
          '已停止': 'info',
          '维护中': 'warning'
        };
        return map[status] || 'info';
      },
      handleSearch() {
        // 搜索处理
        console.log('搜索:', this.searchQuery);
      },
      handleFilter() {
        // 筛选处理
        console.log('类型筛选:', this.typeFilter, '状态筛选:', this.statusFilter);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      showCreateDialog() {
        this.isEditLine = false;
        this.lineForm = {
          id: null,
          name: '',
          type: '',
          status: '运行中',
          template: '',
          description: ''
        };
        this.lineDialogVisible = true;
      },
      handleTypeChange() {
        this.lineForm.template = '';
      },
      submitLineForm() {
        this.$refs.lineForm.validate(valid => {
          if (valid) {
            if (this.isEditLine) {
              // 编辑生产线
              const index = this.productionLines.findIndex(line => line.id === this.lineForm.id);
              if (index !== -1) {
                this.productionLines.splice(index, 1, { ...this.lineForm });
                this.$message.success('生产线更新成功');
              }
            } else {
              // 新建生产线
              const newId = Math.max(...this.productionLines.map(line => line.id)) + 1;
              this.productionLines.push({
                ...this.lineForm,
                id: newId
              });
              this.$message.success('生产线创建成功');
            }
            this.lineDialogVisible = false;
          }
        });
      },
      viewLine(line) {
        this.$message.info(`查看生产线: ${line.name}`);
        // 实际项目中这里可以跳转到详情页面
      },
      editLine(line) {
        this.isEditLine = true;
        this.lineForm = { ...line };
        this.lineDialogVisible = true;
      },
      deleteLine(line) {
        this.$confirm(`确定要删除生产线 "${line.name}" 吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          const index = this.productionLines.findIndex(l => l.id === line.id);
          if (index !== -1) {
            this.productionLines.splice(index, 1);
            this.$message.success('生产线删除成功');
          }
        }).catch(() => {});
      },
      showTemplateDialog() {
        this.templateDialogVisible = true;
        this.selectedTemplateId = null;
      },
      selectTemplate(template) {
        this.selectedTemplateId = template.id;
      },
      showCreateTemplateDialog() {
        this.isEditTemplate = false;
        this.templateForm = {
          id: null,
          name: '',
          type: '烘青',
          description: '',
          steps: this.getDefaultSteps('烘青')
        };
        this.templateEditDialogVisible = true;
      },
      handleTemplateTypeChange(type) {
        this.templateForm.steps = this.getDefaultSteps(type);
      },
      getDefaultSteps(type) {
        if (type === '烘青') {
          return [
            { name: '摊青', temperature: 25, time: 30, humidity: 70, pressure: 0, speed: 0 },
            { name: '杀青', temperature: 220, time: 8, humidity: 40, pressure: 0, speed: 0 },
            { name: '揉捻', temperature: 60, time: 25, humidity: 65, pressure: 2000, speed: 45 },
            { name: '烘青', temperature: 90, time: 40, humidity: 30, pressure: 0, speed: 0 },
            { name: '干燥', temperature: 80, time: 50, humidity: 15, pressure: 0, speed: 0 }
          ];
        } else {
          return [
            { name: '摊青', temperature: 26, time: 35, humidity: 65, pressure: 0, speed: 0 },
            { name: '杀青', temperature: 240, time: 10, humidity: 35, pressure: 0, speed: 0 },
            { name: '揉捻', temperature: 65, time: 30, humidity: 60, pressure: 2200, speed: 50 },
            { name: '炒青', temperature: 180, time: 25, humidity: 25, pressure: 0, speed: 0 },
            { name: '干燥', temperature: 85, time: 55, humidity: 10, pressure: 0, speed: 0 }
          ];
        }
      },
      editTemplate(template) {
        this.isEditTemplate = true;
        this.templateForm = JSON.parse(JSON.stringify(template));
        this.templateEditDialogVisible = true;
      },
      deleteTemplate(template) {
        this.$confirm(`确定要删除模板 "${template.name}" 吗?`, '提示', {
          type: 'warning'
        }).then(() => {
          const index = this.templates.findIndex(t => t.id === template.id);
          if (index !== -1) {
            this.templates.splice(index, 1);
            this.$message.success('模板删除成功');
          }
        }).catch(() => {});
      },
      submitTemplateForm() {
        this.$refs.templateForm.validate(valid => {
          if (valid) {
            if (this.isEditTemplate) {
              // 编辑模板
              const index = this.templates.findIndex(t => t.id === this.templateForm.id);
              if (index !== -1) {
                this.templates.splice(index, 1, { ...this.templateForm });
                this.$message.success('模板更新成功');
              }
            } else {
              // 新建模板
              const newId = 'temp' + (Math.random().toString(36).substr(2, 9));
              this.templates.push({
                ...this.templateForm,
                id: newId
              });
              this.$message.success('模板创建成功');
            }
            this.templateEditDialogVisible = false;
          }
        });
      }
    }
  });
</script>
</body>
</html>